<template>
	<view class="my-settle-container">
		 <!-- 全选 -->
     <label class="radio" @click="changeAllState">
       <radio color="#C00000" :checked="isFullCheck"></radio>
       <text> 全选</text>
     </label>
     <!-- 合计 -->
     <view class="amount-box">
        合计：<text class="amount">￥{{checkedGoodsAmount}}</text>
     </view>
     <!-- 结算按钮 -->
     <view class="btn-settle" @click="settlement">
       结算{{checkedCount}}
     </view>
	</view>
</template>

<script>
  import {mapGetters,mapMutations,mapState} from 'vuex'
	export default {
		data() {
			return {
        
			};
		},
    computed:{
      ...mapGetters('m_cart',['checkedCount','total','checkedGoodsAmount']),
      ...mapGetters('m_user',['addressStr']),
      ...mapState('m_user',['token']),
      isFullCheck(){
        return this.total ===this.checkedCount
      }
    },
    methods:{
      ...mapMutations('m_cart',['updateAllGoodsState']),
      changeAllState(){
        // console.log(!this.isFullCheck)
         this.updateAllGoodsState(!this.isFullCheck)
      },
      //用户点击了结算按钮
      settlement(){
        if(!this.checkedCount) return uni.$showMsg('请选择要结算的商品！')
        if(!this.addressStr) return uni.$showMsg('请选择收获地址！')
        if(!this.token) return uni.$showMsg('请先登录！')
      }
    }
	}
</script>

<style lang="scss">
    .my-settle-container {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;
      background-color: #ffffff;
      align-items: center;
      font-size: 14px;
      padding-left: 5px;
      .radio {
        display: flex;
        align-items: center;
      }
      .amount-box{
        .amount{
          color: #C00000;
          font-weight: bold;
        }
      }
      .btn-settle{
        background-color: #C00000;
        height: 50px;
        line-height: 50px;
        color: #FFFFFF;
        padding: 0 10px;
        min-width: 100px;
        text-align: center;
      }
    }
</style>
